<template>
  <div class="forgetpass">
    <div class="forgetpass_main">
      <div class="forgetpass_top">
        <div class="top_main">
          <logo></logo>
        </div>
      </div>
      <div class="forgetpass_box">
        <div class="forgetpass_container">
          <div class="activelogin">
            <el-card class="box-card" style="width: 325px;">
              <div slot="header" class="clearfix">
                <span style="font-weight:600">忘记密码</span>
              </div>
              <div>
                <el-form
                  :model="forgetForm"
                  status-icon
                  :rules="rules"
                  ref="forgetForm"
                  label-width="0px"
                  class="demo-forgetForm"
                >
                  <!-- <el-form-item prop="name">
                    <el-input
                      placeholder="请输入用户名"
                      v-model.number="forgetForm.name"
                      clearable
                      class="phonenumipt"
                    >
                      <i
                        slot="prefix"
                        style="font-size:20px;color:#666666;font-weight: bold;"
                        class="el-input__icon el-icon-user-solid"
                      ></i>
                    </el-input>
                  </el-form-item> -->
                  <el-form-item prop="phone">
                    <el-input
                      placeholder="请输入手机号码"
                      v-model.number="forgetForm.phone"
                      clearable
                      class="phonenumipt"
                    >
                      <i
                        slot="prefix"
                        style="font-size:20px;color:#666666;font-weight: bold;"
                        class="el-input__icon el-icon-mobile-phone"
                      ></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <div
                      style="display:flex;justify-content:space-between;align-items:center;width:283px;margin:0 auto;"
                    >
                      <el-input
                        placeholder="请输入验证码"
                        v-model.number="forgetForm.code"
                        clearable
                        class="phonenumipt authcode"
                      >
                      </el-input>

                      <el-button
                        style="margin-left:8px;padding: 12px 0px;"
                        @click="getCode"
                        class="login_btn"
                        :class="{ 'disabled-style': getCodeBtnDisable }"
                        :disabled="getCodeBtnDisable"
                      >{{ codeBtnWord }}</el-button
                      >
                    </div>
                  </el-form-item>
                  <el-form-item prop="pass">
                    <el-input
                      type="password"
                      placeholder="请输入密码"
                      v-model.trim="forgetForm.pass"
                      autocomplete="off"
                      show-password
                      class="phonenumipt"
                    >
                      <i
                        slot="prefix"
                        style="font-size:20px;color:#666666;font-weight: bold;"
                        class="el-input__icon el-icon-lock"
                      ></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="checkPass">
                    <el-input
                      type="password"
                      placeholder="请再次输入密码"
                      v-model.trim="forgetForm.checkPass"
                      autocomplete="off"
                      show-password
                      class="phonenumipt"
                    >
                      <i
                        slot="prefix"
                        style="font-size:20px;color:#666666;font-weight: bold;"
                        class="el-input__icon el-icon-lock"
                      ></i
                      ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="submitForm('forgetForm')"
                      class="login_btn"
                    >提 交</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <el-divider></el-divider>
              <router-link
                :to="{
                  path: '/login'
                }"
              >
                <!-- query: { type: 'user' } -->
                <el-button type="text" class="register_btn">
                  返回登录
                </el-button>
              </router-link>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <footerbox style="margin-top:0px"></footerbox>
  </div>
</template>

<script>
import { getSms, doEditPass } from '@/api/login'
import logo from '@/components/logo.vue'
import footerbox from '@/components/footerbox.vue'
export default {
  name: 'Forgetpass',
  components: {
    logo,
    footerbox
  },
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 1000)
    }
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          const reg = /^1[3456789]\d{9}$/
          if (!reg.test(value)) {
            callback(new Error('请填写正确手机号'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        const reg = /^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        // let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!reg.test(value)) {
          callback(new Error('请填写正确的邮箱'))
        } else {
          callback()
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.forgetForm.checkPass !== '') {
          this.$refs.forgetForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.forgetForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      freelogin: false,
      forgetForm: {
        // name: "",
        phone: '',
        code: '',
        pass: '',
        checkPass: ''
        // email: ""
      },
      rules: {
        code: [{ validator: checkCode, trigger: 'blur' }],
        phone: [{ validator: checkPhone, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        email: [{ validator: checkEmail, trigger: 'blur' }]
      },
      codeBtnWord: '获取验证码', // 获取验证码按钮文字
      waitTime: 61 // 获取验证码按钮失效时间
    }
  },

  computed: {
    // 控制获取验证码按钮是否可点击
    getCodeBtnDisable: {
      get() {
        if (this.waitTime == 61) {
          if (this.forgetForm.phone) {
            return false
          }
          return true
        }
        return true
      },
      // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
      set() {}
    }
  },
  created() {
    if (this.$route.query.active) {
      this.active = this.$route.query.active
    }
  },
  mounted() {},
  methods: {
    getCode() {
      console.log(1)
      if (this.forgetForm.phone) {
        // 调用获取短信验证码接口// type   register=注册 update-pass = 修改密码
        getSms({
          phone: this.forgetForm.phone
          //   type: "register"
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '验证码已发送，请稍候查看手机...',
              type: 'success',
              center: true
            })
          }
        })
        // 因为下面用到了定时器，需要保存this指向
        const that = this
        that.waitTime--
        that.getCodeBtnDisable = true
        this.codeBtnWord = `${this.waitTime}s 后重新获取`
        const timer = setInterval(function() {
          if (that.waitTime > 1) {
            that.waitTime--
            that.codeBtnWord = `${that.waitTime}s 后重新获取`
          } else {
            clearInterval(timer)
            that.codeBtnWord = '获取验证码'
            that.getCodeBtnDisable = false
            that.waitTime = 61
          }
        }, 1000)
      }
    },
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('忘记密码', this.forgetForm)
          doEditPass({
            phone: this.forgetForm.phone,
            password: this.forgetForm.checkPass,
            code: this.forgetForm.code
          })
            .then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message({
                  message: '修改成功!',
                  type: 'success'
                })
                this.resetForm(formName)
                this.$router.push({
                  path: '/login',
                  query: { active: 'login' }
                })
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          // console.log("error submit!!");
          that.$message.error('请检查填写内容！')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.dispaly {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.forgetpass {
  .forgetpass_main {
    .forgetpass_top {
      .top_main {
        width: 1200px;
        margin: 0 auto;
      }
    }
    .forgetpass_box {
      height: 740px;
      // background: url("~@/assets/imgs/settled_bg1.jpg") no-repeat center;
      background: url('//img.letuilm.com/2020/07/2a11102020072914400712263.jpg')
        no-repeat center;
      background-size: 100% 100%;
      // background-color: #db0101;
      .forgetpass_container {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .activelogin::v-deep {
          position: absolute;
          top: 120px;
          right: 20px;
          .el-divider--horizontal {
            margin: 4px 0;
          }
          .login_btn {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            // color: #606266;
            text-align: center;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            transition: 0.1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            background-color: rgb(254, 0, 54);
            color: rgb(255, 255, 255);
            width: 284px;
            // margin-top: 20px;
          }
          .login_btn:active {
            border-color: #3a8ee6;
            outline: 0;
          }
          .register_btn {
            padding: 10px 0 0 0;
            font-size: 20px;
            font-weight: bolder;
            color: rgb(254, 0, 54);
          }
        }
      }
    }
  }
}
</style>
